<template>
	<view class="bottom-nav">
		<view class="nav-item" v-for="(item, index) in navItems" :key="index"
			@click="navigateToPage(item.pagePath)">
			<image :src="index === activeIndex ? item.selectedIcon : item.icon" class="nav-icon" />
			<text :class="index === activeIndex?'active':'nav-label'">{{ item.label }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'creatorTabBar',
		props: {
			activeIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 导航栏数据，包含每个导航项的图标和标签
				navItems: [{
						icon: '/static/icon/yzy_xjc.png',
						selectedIcon: '/static/icon/yzy_xjcs.png',
						label: '作品',
						pagePath: "/pages/creator/home/index",
					},
					{
						icon: '/static/icon/wenj1.png',
						selectedIcon: '/static/icon/yzy_zyss1.png',
						label: '库管理',
						pagePath: "/pages/creator/library/index",
					},
					{
						icon: '/static/icon/yzy_wd.png',
						selectedIcon: '/static/icon/yzy_wds.png',
						label: '我的',
						pagePath: "/pages/creator/user/index",
					}
				],
				// {
				// 	"pagePath": "pages/client/index",
				// 	"iconPath": "static/icon/yzy_xjc.png",
				// 	"selectedIconPath": "static/icon/yzy_xjcs.png",
				// 	"text": "首页"
				// },
				// {
				// 	"pagePath": "pages/client/video",
				// 	"iconPath": "static/icon/yzy_zys.png",
				// 	"selectedIconPath": "static/icon/yzy_zyss.png",
				// 	"text": "推荐"
				// },
				// {
				// 	"pagePath": "pages/client/zui",
				// 	"iconPath": "static/icon/yzy_sc.png",
				// 	"selectedIconPath": "static/icon/yzy_scs.png",
				// 	"text": "奖励"
				// },


				// {
				// 	"pagePath": "pages/client/member/index",
				// 	"iconPath": "static/icon/yzy_wd.png",
				// 	"selectedIconPath": "static/icon/yzy_wds.png",
				// 	"text": "我的"
				// }
			};
		},
		methods: {
			// 处理点击事件
			navigateToPage(url) {
				uni.reLaunch({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	.bottom-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #000;
		border-top: 1px solid #000;
		padding: 10rpx 0;
		z-index: 1000;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.nav-icon {
		width: 30px;
		height: 30px;
	}

	.nav-label {
		font-size: 11px;
		color: #828998;
	}

	.active {
		color: #00c850;
		font-size: 11px;
	}
</style>